/**
 * GSAP 动画 Composable
 * 提供常用的 GSAP 动画封装
 * 
 * 注意：需要先安装 GSAP: pnpm add gsap
 */

/**
 * 淡入动画
 */
export function fadeIn(element, options = {}) {
  const {
    duration = 0.6,
    delay = 0,
    y = 30,
    ease = 'power2.out',
    onComplete
  } = options

  if (!element) return

  // 如果 GSAP 未安装，使用 CSS 动画作为降级方案
  if (typeof window === 'undefined' || !window.gsap) {
    element.style.opacity = '0'
    element.style.transform = `translateY(${y}px)`
    
    setTimeout(() => {
      element.style.transition = `all ${duration}s ${ease}`
      element.style.opacity = '1'
      element.style.transform = 'translateY(0)'
      
      if (onComplete) {
        setTimeout(onComplete, duration * 1000)
      }
    }, delay * 1000)
    
    return
  }

  // 使用 GSAP
  window.gsap.from(element, {
    opacity: 0,
    y,
    duration,
    delay,
    ease,
    onComplete
  })
}

/**
 * 交错动画
 */
export function staggerAnimation(elements, options = {}) {
  const {
    duration = 0.6,
    stagger = 0.1,
    y = 30,
    ease = 'power2.out'
  } = options

  if (!elements || elements.length === 0) return

  // 降级方案
  if (typeof window === 'undefined' || !window.gsap) {
    elements.forEach((el, index) => {
      setTimeout(() => {
        fadeIn(el, { duration, y, ease })
      }, index * stagger * 1000)
    })
    return
  }

  // 使用 GSAP
  window.gsap.from(elements, {
    opacity: 0,
    y,
    duration,
    stagger,
    ease
  })
}

/**
 * 数字滚动动画
 */
export function countUp(element, options = {}) {
  const {
    start = 0,
    end = 100,
    duration = 2,
    ease = 'power1.out',
    onUpdate
  } = options

  if (!element) return

  const obj = { value: start }
  
  // 降级方案
  if (typeof window === 'undefined' || !window.gsap) {
    const increment = (end - start) / (duration * 60)
    let current = start
    
    const timer = setInterval(() => {
      current += increment
      if (current >= end) {
        current = end
        clearInterval(timer)
      }
      element.textContent = Math.floor(current)
      if (onUpdate) onUpdate(current)
    }, 1000 / 60)
    
    return
  }

  // 使用 GSAP
  window.gsap.to(obj, {
    value: end,
    duration,
    ease,
    onUpdate: () => {
      element.textContent = Math.floor(obj.value)
      if (onUpdate) onUpdate(obj.value)
    }
  })
}

/**
 * 滚动触发动画
 */
export function scrollTriggerAnimation(element, options = {}) {
  const {
    trigger = element,
    start = 'top 80%',
    end = 'bottom 20%',
    animation = {},
    onEnter,
    onLeave
  } = options

  if (!element) return

  // 降级方案：使用 Intersection Observer
  if (typeof window === 'undefined' || !window.gsap || !window.ScrollTrigger) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          fadeIn(element, animation)
          if (onEnter) onEnter()
        } else {
          if (onLeave) onLeave()
        }
      })
    }, {
      threshold: 0.1
    })

    observer.observe(element)
    return () => observer.disconnect()
  }

  // 使用 GSAP ScrollTrigger
  window.gsap.from(element, {
    scrollTrigger: {
      trigger,
      start,
      end,
      onEnter,
      onLeave
    },
    ...animation
  })
}

/**
 * 鼠标跟随动画
 */
export function mouseFollowAnimation(element, options = {}) {
  const {
    speed = 0.1,
    distance = 20
  } = options

  if (!element) return

  let mouseX = 0
  let mouseY = 0
  let currentX = 0
  let currentY = 0

  const handleMouseMove = (e) => {
    const rect = element.getBoundingClientRect()
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2
    
    mouseX = (e.clientX - centerX) / rect.width * distance
    mouseY = (e.clientY - centerY) / rect.height * distance
  }

  const animate = () => {
    currentX += (mouseX - currentX) * speed
    currentY += (mouseY - currentY) * speed
    
    element.style.transform = `translate(${currentX}px, ${currentY}px)`
    requestAnimationFrame(animate)
  }

  element.addEventListener('mousemove', handleMouseMove)
  animate()

  return () => {
    element.removeEventListener('mousemove', handleMouseMove)
  }
}

